import { useNavigate } from 'react-router-dom'
import React, { useEffect,forwardRef,useImperativeHandle,useState,useRef,useCallback,useMemo } from 'react'
import CardText from './card'
import { useStore, observer } from '@/store'
const listItem = (props)=>{
    const navigate = useNavigate()
    const { homeStore } = useStore()
    const onhandleClick = ()=>{
        localStorage.setItem('houseInfo',JSON.stringify(props?.itemInfo))
        homeStore.setHouseInfo(props?.itemInfo)
        navigate('/housedetail')
    }
    const getHouseType = (_str) => {
        let type = ''
        const arr = _str.split('-')
        for (let i = 0; i < arr.length; i++) {
            const element = arr[i];
            if (i == 0 && element!== '') {
                type += element + '室'
            }
            if (i == 1 && element!== '') {
                type += element + '厅'
            }
        }
        return type
    }
    const getRandowOri = useMemo(() => {
        const arr = ['链家','贝壳优选','自如']
        return arr[Math.floor(Math.random()*3)]
    },[]) 
    const getRandomToiletNumber = useMemo(() => {
        const arr = ['1','2']
        return arr[Math.floor(Math.random()*2)]
    },[]) 
    useEffect(()=>{
        console.log(props.itemInfo,'props.itemInfo')
    },[props])
    return (
        <div onClick={onhandleClick} className="flex py-4">
            <div className="pr-3">
                <img className="rounded-lg" style={{width:'100px',height:'100px'}} src={props?.itemInfo.img} alt="" />
            </div>
            <div className='flex flex-1 flex-col justify-evenly'>
                <div>整租•{props?.itemInfo.poltName} {getHouseType(props?.itemInfo.Housetype)}</div>
                <div className='text-xs font-extralight'>{props?.itemInfo.UsableArea + '㎡' + '|' + getHouseType(props?.itemInfo.Housetype) + '|' + getRandomToiletNumber + '卫' + props?.itemInfo.orientation + '|' + getRandowOri}</div>
                <div>朝阳•朝青</div>
                <div className='flex justify-between'>
                    <CardText text={'随时看房'}></CardText>
                    <CardText text={'押一付一'}></CardText>
                    <CardText text={'集中供暖'}></CardText>
                    <CardText text={'精装'}></CardText>
                    <CardText text={'首次出租'}></CardText>

                </div>
                <div className='text-red-500 text-lg'>{props?.itemInfo.rent + '元/月'}</div>
            </div>
        </div>
    )
}
export default listItem